<template>
    <div class="phoneKey">
        <!-- 顶部状态栏 -->
        <div class="top">
            <van-icon name="arrow-left" size="20px" @click="goback()" />
            <div>申请记录</div>
        </div>
        <!-- 审核详情 -->
        <ul v-for="(item,index) in examineList" :key="index" class="examineList">
            <!-- 审核时间状态  -->
            <li class="examineTime">
                <div class="a">
                    <div class="left">申请时间</div>
                    <div class="right">{{item.create_time}}</div>
                </div>
                <div class="a">
                    <div class="left">审核状态</div>
                    <div class="right">{{sum(item.apply_state)}}</div>
                </div>
            </li>
            <!-- 基本资料 -->
            <li class="examineInfo">
                <div class="info">
                    <p>基本资料</p>
                    <div class="b">
                        <div class="left">姓名</div>
                        <div class="right">{{item.apply_user_name}}</div>
                    </div>
                    <div class="b">
                        <div class="left">电话</div>
                        <div class="right">{{username}}</div>
                    </div>
                </div>
            </li>
            <!--小区地址  -->
            <li class="examineAddress">
                <div class="address">
                    <p>授权地址</p>
                    <div class="b">
                        <div class="left">城市</div>
                        <div class="right">黄冈</div>
                    </div>
                    <div class="b">
                        <div class="left">小区</div>
                        <div class="right">{{item.comm_name}}</div>
                    </div>
                    <div class="b">
                        <div class="left">楼栋房号</div>
                        <div class="right">{{item.buil_name}}{{item.unit_name}}{{item.room_name}}</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    import { Step, Steps } from 'vant'
    import { Icon } from 'vant'

    export default {
        // 当前组件的名称
        name: 'home',

        data() {
            return {
                active: 1,
                username: "",
                idCard: "",
                examineList: [1, 2]

            }
        },

        // 在当前组件中添加其他的自定义组件
        components: {

        },

        /*
            在computed中添加mapState
            如果computed中只有一个辅助函数，后面可以直接写成函数名
        */
        computed: {
            ...mapState(['token', 'userid',"userPhone"]), // this.token相当于this.$store.state.token
            
        },
        methods: {
            getExamine() {
                this.$axios.get('/face/getfaceopenlist', {
                    // headers:{
                    //     token:this.token
                    // },
                    params: {
                        user_id: this.userid
                    }
                }).then((res) => {
                    //console.log(res);
                    let { message, data, status } = res;
                    console.log(res);
                    if (data.code == 200) {
                       this.examineList=data.list
                    }
                })
            },
            goback() {
                this.$router.back()
            },
            sum(a){
                if(a==1){
                    return "审核中"
                }
                if(a==2){
                    return "审核成功"
                }
                if(a==3){
                    return "审核失败"
                }
            }
        },
        // 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来
        created() {
            console.log('created', this.$el)
        },
        // 生命周期函数,当前组件上的所有DOM节点都已经创建出来
        mounted() {
            this.getExamine()
            this.username=this.userPhone
            console.log('mounted', this.$el)

            // 监听页面滚动,显示返回顶部的图标
            // window.onscroll = this.onScroll

            // 请求获取轮播图
            //this.reqSwiperItems()
            // 请求获取商品列表的第一页
            //this.reqGoodsList()

            // 获取存在本地的token
            // const token = localStorage.getItem('token')
            // 把token存到当前组件的data中
            // this.token = token

            // 从store中获取最新的token
            // this.token = this.$store.state.token

            // console.group('-----------睁大你的狗眼-----------')
            // console.log('home里面的token为',this.token)
            // console.groupEnd()
        },
        // 生命周期函数,当数据发生改变并且导致视图发生相应的改变
        updated() {
            // console.log('updated')
        },
        // 生命周期函数,组件被销毁
        destroyed() {
            console.log('destroyed')
        },
        // 生命周期函数,进入缓存组件
        activated() {
            console.log('activated')
            this.getExamine()
            this.username=this.userPhone
            // 再次回来的时候,直接滚动到之前离开时候保存的位置


            // 如果每次进入缓存组件的时候，需要实时更新当前组件中的内容，可以将这些更新代码写在activated

            // 请求获取用户信息
            // this.reqUserInfo()
            // this.$store.dispatch('changeUserInfo2')

        },
        // 生命周期函数,离开缓存组件
        deactivated() {
            console.log('deactivated')

            // 不要尝试去获取页面的scrollTop,因为页面只有一个,跳转到新的路由,页面的scrollTop会变成0
            // 所以,在离开的时候,把当前组件的scrollTop保存下来,赋给一个新的变量
            // this.cache_scrollTop = this.scrollTop
        },
        // 离开路由之前,它会在deactivated之前调用
        beforeRouteLeave(to, from, next) {
            console.log('beforeRouteLeave')

            // 1.获取页面的scrollTop,赋给一个新的变量
            // this.cache_scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            // 2.获取顶部状态栏距离父元素底部的距离,赋给一个新的变量


            // 必须调用next,否则就不会离开当前路由
            next()
        }
    }
</script>

<!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
<style lang="scss" scoped>
    .top {

        height: 40px;
        line-height: 40px;
        position: relative;
        font-size: 16px;
        border-bottom: 1px solid #999;
        margin-bottom: .3rem;
    }

    .top div {
        text-align: center;

    }

    .van-icon-arrow-left {
        position: absolute;
        top: 10px;
    }

    .examineList {
        border-top: 3px solid #07c160;
        width: 95%;
        margin: 0 auto;
        font-size: 14px;
        border-right: 1px solid #999;
        border-left: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .examineTime {
        border-bottom: 2px dashed #666;

        padding: .2rem;
    }

    .a {
        display: flex;
        justify-content: space-between;
    }

    .b {
        display: flex;
        padding: 0 .2rem;
        justify-content: space-between;

    }

    .b div {
        /* width: 50%; */
    }
    .left{
        margin-bottom: .3rem;
    }

    .examineInfo,
    .examineAddress {
        padding: .3rem;
    }

    p {
        padding-bottom: .2rem;
        color: #07c160;
        font-size: 18px;
    }
    .phoneKey{
        padding-bottom: 50px;
    }
</style>